<ion-header>
  <ion-navbar>
    <ion-title>确认订单</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div class="confirmOrderContainer">
    <section *ngIf="!showLoading">
      <div class="address_container" [navPush]="'ChooseAddressPage'">
        <div class="address_empty_left">
          <div class="add_address" *ngIf="!choosedAddress()">请添加一个收货地址</div>
          <div *ngIf="choosedAddress()" class="address_detail_container">
            <div class="address_tag">
              <span>订单配送至</span>
              <span *ngIf="choosedAddress().tag" [ngStyle]="{'color': iconColor[choosedAddress().tag]}">{{choosedAddress().tag}}</span>
            </div>
            <div class="address_detail">
              <p>{{choosedAddress().address}}{{choosedAddress().address_detail}}</p>
            </div>
            <div class="address_user">
              <span>{{choosedAddress().name}}</span>
              <span>{{choosedAddress().sex == 1? '先生':'女士'}}</span>
              <span>{{choosedAddress().phone}}</span>
            </div>
          </div>
        </div>
        <svg class="address_empty_right">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
        </svg>
      </div>
      <section class="delivery_model container_style">
        <div>
          <p class="deliver_text">送达时间</p>
          <p class="deliver_fengniao" *ngIf="checkoutData?.cart?.is_deliver_by_fengniao">蜂鸟专送</p>
        </div>
        <section class="deliver_time">
          <p>尽快送达 | 预计 {{checkoutData.delivery_reach_time}}</p>
        </section>
      </section>
      <section class="pay_way container_style">
        <header class="header_style">
          <span>支付方式</span>
          <div class="pay_type">
            <span>在线支付</span>
          </div>
        </header>
        <section class="hongbo">
          <span>红包</span>
          <span>暂时只在饿了么 APP 中支持</span>
        </section>
      </section>
      <section class="food_list">
        <header *ngIf="checkoutData.cart.restaurant_info">
          <img [src]="imgBaseUrl + checkoutData.cart.restaurant_info.image_path">
          <span>{{checkoutData.cart.restaurant_info.name}}</span>
        </header>
        <ul class="food_list_ul" *ngIf="checkoutData.cart.groups">
          <li *ngFor="let item of checkoutData.cart.groups[0]" class="food_item_style">
            <p class="food_name ellipsis">{{item.name}}</p>
            <div class="num_price">
              <span>x {{item.quantity}}</span>
              <span>¥{{item.price}}</span>
            </div>
          </li>
        </ul>
        <div class="food_item_style" *ngIf="checkoutData.cart.extra">
          <p class="food_name ellipsis">{{checkoutData.cart.extra[0].name}}</p>
          <div class="num_price">
            <span></span>
            <span>¥ {{checkoutData.cart.extra[0].price}}</span>
          </div>
        </div>
        <div class="food_item_style">
          <p class="food_name ellipsis">配送费</p>
          <div class="num_price">
            <span></span>
            <span>¥ {{checkoutData.cart.deliver_amount || 0}}</span>
          </div>
        </div>
        <div class="food_item_style total_price">
          <p class="food_name ellipsis">订单 ¥{{checkoutData.cart.total}}</p>
          <div class="num_price">
            <span>待支付 ¥{{checkoutData.cart.total}}</span>
          </div>
        </div>
      </section>
      <section class="pay_way container_style">
        <div class="header_style" (click)="toRemarkPage()">
          <span>订单备注</span>
          <div class="more_type">
            <span class="ellipsis">{{remarkList() || '口味、偏好等'}}</span>
            <svg class="address_empty_right">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </div>
        </div>
        <div class="hongbo" [ngClass]="{support_is_available: checkoutData.invoice.is_available}">
          <span>发票抬头</span>
          <span>
              {{checkoutData.invoice.status_text}}
              <svg class="address_empty_right">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
          </span>
        </div>
      </section>
      <section class="confrim_order">
        <p>待支付 ¥{{checkoutData.cart.total}}</p>
        <p (click)="confirmOrder()">确认下单</p>
      </section>
    </section>
    <loading *ngIf="showLoading"></loading>
  </div>
</ion-content>